.layer {
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    transition: all 0.4s;
    opacity: 0;

    .content {
        position: fixed;
        background: #fff;
        width: 100%;
        overflow: hidden;
        transition: all 0.4s;
        opacity: 0;
    }

    .toTop {
        left: 0;
        bottom: 0;
        height: auto;
        border-top-left-radius: 2vw;
        border-top-right-radius: 2vw;
        transform: translateY(100%);
    }

    .toLeft {
        height: 100vh;
        left: 100vw;
        top: 0;
    }

    .toRight {
        height: 100vh;
        left: -100vw;
        top: 0;
    }

    &.active {
        opacity: 1;

        .content {
            opacity: 1;
        }

        .toTop {
            transform: translateY(0);
        }

        .toLeft {
            left: 0;
        }

        .toRight {
            left: 0;
        }
    }
}